import React, {Component} from "react";
import {View, Text, StyleSheet, TouchableOpacity, Image, PixelRatio, Dimensions} from "react-native";
import {color} from "../../widget/color";
const {width} = Dimensions.get('window').width;
import PropTypes from 'prop-types';

export default class HomeWorkTabBar extends Component {

    static propType = {
        goToPage: PropTypes.func,
        activeTab: PropTypes.number,
        tabs: PropTypes.array,
        tabNames: PropTypes.array,
    };

    componentDidMount() {
        this.props.scrollValue.addListener(this.setAnimationValue);
    }

    setAnimationValue({value}) {
        console.log(value);
    }

    render() {
        return (
            <View style={styles.tabs}>
                {this.props.tabs.map((tab, i) => {
                    let color = this.props.activeTab === i ? 'white' : 'rgba(0, 0, 0, 0.8)';
                    let styleself = this.props.activeTab === i ? styles.submit_btn : styles.tabItem;
                    return (
                        <TouchableOpacity
                            key={i}
                            activeOpacity={0.8}
                            style={styles.tab}
                            onPress={()=>this.props.goToPage(i)}>
                            <View style={styleself}>
                                <Text style={{color: color, fontSize: 14,fontWeight:'bold'}}>
                                    {this.props.tabNames[i]}
                                </Text>
                            </View>
                        </TouchableOpacity>
                    )
                })}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        marginTop: 20
    },
    tabs: {
        flexDirection: 'row',
        height: 49,
        borderTopColor: '#d9d9d9',
        borderTopWidth: 2
    },
    tab: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#f5f5f5',
    },
    tabItem: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-around'
    },
    submit_btn: {
        marginLeft: 15,
        borderRadius: 13,
        backgroundColor: '#DB3843',
        height: 25,
        width: 100,
        justifyContent: 'center',
        alignItems: 'center'
    },

});

